﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo is simulated the touch-device behavior of the jqxMenu.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="simulator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            prepareDemo("menu");
            // create jqxMenu
            $("#menu").jqxMenu({ width: '95%', height: 30, showTopLevelArrows: true, theme: 'fresh' });
            $("#menu").css('visibility', 'visible');
            initDemo("menu");
        });
    </script>
</head>
<body class='default'>
    <div id="demoContainer" style="margin-left: 220px; width: 460px; height: 855px; overflow: hidden;
        background-image: url(../images/iphone.png);">
        <div id="container" style="background-image: url(../images/ipadbackground.png); margin-left: 46px; height: 518px;
            width: 365px; margin-top: 185px;">
            <div id='menu' style='position: relative; margin-left: 7px; top: 50px; visibility: hidden;'>
                <ul>
                    <li><a href="#Home">Home</a></li>
                    <li>Solutions
                        <ul style='width: 180px;'>
                            <li><a href="#Education">Education</a></li>
                            <li><a href="#Government">Government</a></li>
                            <li><a href="#Manufacturing">Manufacturing</a></li>
                            <li type='separator'></li>
                            <li>Software Solutions
                                <ul style='width: 100px;'>
                                    <li><a href="#Mobile">Mobile</a></li>
                                    <li><a href="#RIA">RIA</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li><a href="#PCProducts">PC products</a></li>
                            <li><a href="#MobileProducts">Mobile products</a></li>
                            <li><a href="#AllProducts">All products</a></li>
                        </ul>
                    </li>
                    <li>Company
                        <ul style='width: 100px;'>
                            <li><a href="#About">About Us</a></li>
                            <li><a href="#Press">Press</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
